<div class="content-section introduction">
    <div>
        <span class="feature-title">KeyFilter</span>
        <span>KeyFilter directive restricts user input based on a regular expression.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3>Filtering</h3>
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText pKeyFilter="int" placeholder="Integers">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText pKeyFilter="num" placeholder="Numbers">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText pKeyFilter="money" placeholder="Money">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText pKeyFilter="hex" placeholder="Hex">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText pKeyFilter="alpha" placeholder="Alphabetic">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText pKeyFilter="alphanum" placeholder="Alphanumeric">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText [pKeyFilter]="blockSpecial" placeholder="Block # < > * !">
        </div>
        <div class="ui-g-12 ui-md-4">
            <input type="text" pInputText [pKeyFilter]="blockSpace" placeholder="Block space key">
        </div>
    </div>

    <h3>Validation Mode</h3>
    <form #form="ngForm">
        <label for="cc" style="display:block;margin-bottom:4px">Credit Card</label>
        <input id="cc" type="text" name="cc" [(ngModel)]="cc" pInputText [pKeyFilter]="ccRegex" [pValidateOnly]="true" placeholder="1234-1234-1234-1234">
        <p-message severity="error" text="Not a valid number" [@errorState]="form.dirty && !form.valid ? 'visible' : 'hidden'"></p-message>
    </form>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
                    <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;KeyFilterModule&#125; from 'primeng/keyfilter';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>KeyFilter directive is applied to an input text element using pKeyFilter attribute whose value is either a built-in regular expression name or a custom one.
                Following input only accepts integers.</p>
            
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;input type="text" pKeyFilter="int"&gt;
</code>
</pre>

            <h3>Built-in Filters</h3>
            <p>Commonly used cases have their own built-in shortcuts.</p>
            <ul>
                <li>pint: Positive integers</li>
                <li>int: Integers</li>
                <li>pnum: Positive numbers</li>
                <li>num: Numbers</li>
                <li>hex: Hexadecimal</li>
                <li>email: Email</li>
                <li>alpha: Alphabetic</li>
                <li>alphanum: Alphanumeric</li>
            </ul>

            <h3>Custom Filter</h3>
            <p>A custom filter is provided by binding a regular expression, here is an example that blocks special characters including "< > * !"</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;input type="text" pKeyFilter="noSpecial"&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class KeyFilterDemo &#123;

     noSpecial: RegExp = /^[^&lt;&gt;*!]+$/

&#125;
</code>
</pre>

            <h3>Validate Mode</h3>
            <p>Instead of blocking a single keypress, the alternative validation mode which is enabled with pValidateOnly property validates the whole input
                with a built-in Angular validator.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;form #form="ngForm"&gt; 
    &lt;label for="cc"&gt;Credit Card&lt;/label&gt; 
    &lt;input id="cc" type="text" name="cc" [(ngModel)]="cc" pInputText [pKeyFilter]="ccRegex" [pValidateOnly]="true" placeholder="1234-1234-1234-1234"&gt;
    &lt;p-message severity="error" text="Not a valid number" [@errorState]="form.dirty && !form.valid ? 'visible' : 'hidden'"&gt;&lt;/p-message&gt;
&lt;/form&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>pValidateOnly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, instead of blocking keys, input is validated internally to test against the regular expression.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>This directive does not apply any styling.</p>
            
            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>
        
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/tooltip" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3&gt;Filtering&lt;/h3&gt;
&lt;div class="ui-g ui-fluid"&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText pKeyFilter="int" placeholder="Integers"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText pKeyFilter="num" placeholder="Numbers"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText pKeyFilter="money" placeholder="Money"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText pKeyFilter="hex" placeholder="Hex"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText pKeyFilter="alpha" placeholder="Alphabetic"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText pKeyFilter="alphanum" placeholder="Alphanumberic"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText [pKeyFilter]="blockSpecial" placeholder="Block # &lt; &gt; * !"&gt;
    &lt;/div&gt;
    &lt;div class="ui-g-12 ui-md-4"&gt;
        &lt;input type="text" pInputText [pKeyFilter]="blockSpace" placeholder="Block space key"&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;Validation Mode&lt;/h3&gt;
&lt;form #form="ngForm"&gt;
    &lt;label for="cc" style="display:block;margin-bottom:4px"&gt;Credit Card&lt;/label&gt;
    &lt;input id="cc" type="text" name="cc" [(ngModel)]="cc" pInputText [pKeyFilter]="ccRegex" [pValidateOnly]="true" placeholder="1234-1234-1234-1234"&gt;
    &lt;p-message severity="error" text="Not a valid number" [@errorState]="form.dirty && !form.valid ? 'visible' : 'hidden'"&gt;&lt;/p-message&gt;
&lt;/form&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class KeyFilterDemo &#123;

    blockSpecial: RegExp = /^[^&lt;&gt;*!]+$/ 
    
    blockSpace: RegExp = /[^\s]/; 
    
    ccRegex: RegExp = /[0-9]&#123;4&#125;-[0-9]&#123;4&#125;-[0-9]&#123;4&#125;-[0-9]&#123;4&#125;$/; 
    
    cc: string; 
    
&#125;
</code>
</pre>

        </p-tabPanel>
     </p-tabView >
</div>
